<template>
	<view class=" bg-grey allhw-vh ">
		<!-- 搜索相关的东西 -->
		<view><im-navBar ref="navBarRef" backAction :rightBtn="rightBtn" @rightActionSelectedFu="navBarRightActionSelectedFu" :navbarText="navbarText"></im-navBar></view>
		<view class="reqFriend-mian animation-slide-top">
			<view class="reqFriend-mian-title tui-center">{{ formTitle }}</view>
			<view class="reqFriend-mian-form-item">
				<tui-list-view title="发送添加好友申请">
					<view class="reqFriend-mian-form-item-text"><textarea :value="reqDto.remark" class="textTarea-150" placeholder="请输入请求备注" /></view>
				</tui-list-view>
			</view>
			<view class="reqFriend-mian-form-remark ">
				<tui-list-view title="设置备注">
					<view class="reqFriend-mian-form-item-text"><textarea :value="reqDto.nickName" class="textTarea-50" :placeholder="reqDto.nickName" /></view>
				</tui-list-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarText: '',
			formTitle: '申请添加好友',
			rightBtn: {
				btnUse: true,
				btnText: '发送',
				btnType: 'green'
			},
			reqDto: {
				remark: '您好，我是xxx',
				nickName: 'Geez'
			}
		};
	},
	methods: {
		navBarRightActionSelectedFu(e) {
			console.log('navBarRightActionSelectedFu', e);
			uni.showToast({
				icon: 'success'
			});
			setTimeout(function() {
				uni.redirectTo({
					url: '/pages/chat/chat'
				});
			}, 1500);
		}
	}
};
</script>

<style scoped>
.reqFriend-mian {
	margin-top: 60rpx;
	height: 1000rpx;
	width: 100%;
}
.reqFriend-mian-title {
	height: 150rpx;
	line-height: 150rpx;
	font-size: 40rpx;
	font-weight: bolder;
}
.reqFriend-mian-form-item {
	padding: 60rpx;
	margin-top: -40rpx;
}

.reqFriend-mian-form-item-text {
	margin-left: 20rpx;
	margin-right: 20rpx;
	padding: 10rpx;
	background-color: #dcdcdc;
	border-radius: 2%;
}
.textTarea-150 {
	height: 150rpx;
}
.textTarea-50 {
	height: 50rpx;
}
.reqFriend-mian-form-remark {
	padding: 60rpx;
	margin-top: -90rpx;
}
</style>
